<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> class和style的绑定</title>
    <style>
        .bg{
            background: red;
        }
        .bd{
            border: 1px solid black;
        }
        .co{
            color: yellow;
        }
    </style>
</head>
<body>
    <div id="app">
        <select v-model="type">
            <option value="number">数字</option>
            <option value="password">密码</option>
            <option value="text">文本</option>
            <option value="checkbox">复选框</option>
        </select>
        <p>{{type}}</p>
        <input v-bind:type="type">
        <hr>
        
        <input type="checkbox" v-model="classList['bg']">红色背景
        <input type="checkbox" v-model="classList['bd']">黑色边框
        <input type="checkbox" v-model="classList['co']">字体颜色
        <div id="box" v-bind:class="classList">
            通过复选框修改样式
        </div>
        <hr>
        字体大小：<input type="text" v-model="size">
        字体颜色：<input type="color" v-model="color">
        <p :style='styleList'>字体可随意设置</p>
        <hr>
        
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                type:'text',
                classList:{
                    bg:false,
                    bd:false,
                    co:false,
                },
                size:16,
                color:'blue'
            },
            computed:{
                styleList(){
                    return {
                        color:this.color,
                        fontSize:this.size+'px'
                    }
                }
            }
        })
    </script>
</body>
</html>